<template>
	<page-meta :page-style="'overflow:'+(showResultPop?'hidden':'visible')"></page-meta>
	<view class="sti_index_page" v-if="showIndexPage">
		<image @load="loadImg" class="imgs" :src="picUrl+info.index_img" mode="widthFix"></image>
		<view v-if="showIndex" class="sti_index_img_box">
			<view class="sti_index_num_box">
				<image class="sti_index_num" :src="onlinePic+'sti/sti_index_num.png'" mode="widthFix"></image>
				<view v-if="info.join_number_text" class="sti_index_num_text">{{info.join_number_text}}</view>
			</view>
			<image v-if="info.index_prize_img" class="prize_img" :src="picUrl+info.index_prize_img" mode="widthFix">
			</image>
			<image v-if="info.button_img" class="btn_img"
				:style="info.surplus_join_number>0?'':'filter: grayscale(100%);'" :src="picUrl+info.button_img"
				mode="widthFix" @click="goForm()"></image>
			<view v-if="info.rule_text" class="reslut_btn" @click="showResultPop=true">活动规则</view>
		</view>
		<view class="sti_index_mask" v-if="showResultPop"></view>
		<view class="sti_index_pop_box" v-if="showResultPop">
			<view class="sti_index_pop">
				<image class="pop_img_top" :src="picUrl+info.rule_top_img" mode="widthFix"></image>
				<view class="index_pop_text">
					<text>{{info.rule_text}}</text>
				</view>
				<view class="index_pop_btn_box">
					<view class="index_pop_btn" @click="showResultPop=false">我已知晓</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getClubConfig,
		getStiActiveInfo,
	} from '@/api/motortime.js';
	let app = getApp()
	export default {
		data() {
			return {
				is_online: 0,
				info: '',
				register_channel: '',
				showIndexPage: false,
				showIndex: false,
				showResultPop: false,
				picUrl: app.globalData.picUrl,
				onlinePic: app.globalData.onlinePic,
				pdbottom: uni.getSystemInfoSync().safeAreaInsets.bottom + 80,
			};
		},
		onShow() {
			if (!uni.getStorageSync('access_token')) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			if (uni.getStorageSync('onload')) {
				this.getStiActiveInfo()
				uni.removeStorage({
					key: 'onload'
				})
			}
		},
		onLoad(options) {
			this.is_online = options.is_online ? options.is_online : 0
			console.log(options)
			if (options.register_channel) {
				uni.setStorage({
					key: 'register_channel',
					data: options.register_channel
				})
			}
			if (uni.getStorageSync('access_token')) {
				uni.showLoading({})
				this.getStiActiveInfo()
			}
			var params = {
				event_code: 'sti宠粉活动',
				path: 'pages/sti/index',
				event_id: '',
				title: '',
				source_page: 'sti宠粉活动-首页',
				value: '',
			}
			app.BurialPoint(params)
		},
		methods: {
			getStiActiveInfo() {
				getStiActiveInfo({
					is_online: this.is_online,
					huodong_version:2
				}).then(res => {
					if (res.state == 1) {
						this.info = res.data.info
						if (res.data.info.is_enroll == 1) {
							uni.redirectTo({
								url: '/pages/sti/result'
							})
						} else {
							this.showIndexPage = true
						}
						//is_enroll:,   是否提交  0 未提交  1 已提交
					} else {}
				})
			},
			loadImg() {
				this.showIndex = true
				uni.hideLoading()
			},
			goForm() {
				if (this.info.surplus_join_number > 0) {
					uni.navigateTo({
						url: '/pages/sti/form'
					})
				}
				var params = {
					event_code: 'sti宠粉活动',
					path: 'pages/sti/index',
					event_id: '',
					title: '',
					source_page: 'sti宠粉活动-首页立即报名',
					value: '',
				}
				app.BurialPoint(params)
			}
		},
		onShareAppMessage(res) {
			app.getShareTask()
			return {
				title: this.info.share_title,
				imageUrl: this.info.share_img ? this.picUrl + this.info.share_img : this.picUrl + this.info.index_img
			}
		},
	}
</script>

<style lang="scss">
	.sti_index_page {
		height: 100vh;
		position: relative;
		background-color: #0B0715;

		.imgs {
			width: 100%;
			vertical-align: middle;
		}

		.sti_index_img_box {
			position: absolute;
			// top: 720rpx;//第一弹
			top: 465rpx;//第二弹
			left: 0;
			right: 0;
			z-index: 1;
			padding: 0 43rpx 0 43rpx;
			text-align: center;
		}

		.sti_index_num_box {
			min-height: 72rpx;
			position: relative;
		}

		.sti_index_num_text {
			font-family: YouSheBiaoTiHei;
			color: #FFFFFF;
			font-size: 42rpx;
			font-style: oblique;
			letter-spacing: 4rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.sti_index_num {
			width: 90%;
			vertical-align: middle;
		}

		.prize_img {
			// width: 100%;
			// margin-top: 50rpx;
			width: 90%;
			margin-top: 370rpx;
		}

		.btn_img {
			width: 100%;
			// margin-top: 70rpx;
			margin-top: -15rpx;
		}

		.reslut_btn {
			color: #C80F48;
			font-size: 32rpx;
			margin-top: 16rpx;
		}

		.sti_index_mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 5;
			background-color: rgba(0, 0, 0, .8);
		}

		.sti_index_pop_box {
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 6;
			display: flex;
			padding: 0 55rpx;
			align-items: center;
			justify-content: center;
		}

		.sti_index_pop {
			position: relative;
			border-radius: 8rpx;
			background-color: #FFFFFF;
			max-height: calc(100vh - 320rpx);

			.pop_img_top {
				position: absolute;
				top: -126rpx;
				left: 0;
				right: 0;
				width: 100%;
				z-index: 7;
			}

			.index_pop_text {
				max-height: 45vh;
				font-size: 24rpx;
				overflow-y: auto;
				line-height: 42rpx;
				margin-top: 100rpx;
				padding: 0 40rpx 30rpx 40rpx;
			}

			.index_pop_btn_box {
				display: flex;
				justify-content: center;
				padding: 60rpx 0;


				.index_pop_btn {
					width: 465rpx;
					height: 80rpx;
					color: #FFFFFF;
					font-size: 36rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 8rpx;
					background-color: #C80F48;
				}
			}
		}
	}
</style>